<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>自定义指令-函数式</title>
</head>

<body>
    <!-- 
        需求
            1.定义一个v-big指令  效果和v-text 效果一样   但会把绑定的数值放大20倍
            2.定义一个v-fbind指令    效果和v-bind效果一样  但可让绑定的input元素默认获取焦点

        自定义指令总结：
            1.自定义语法：
                1.局部指令：
                    new vue（{                                           new vue（{
                        directives：{指令名：配置对象}       或                  directives：{指令名：回调函数}
                    }）                                                   }）
                2.全局指令：
                    Vue.directive('指令名', 配置对象}      或                Vue.directive('指令名', 回调函数} 
            2.配置对象中常用的三个方法：
                     
                    bind：指令与元素绑定的时候(一上来)
                    
                    inserted：指令所在元素被插入页面时
                   
                    update： 指令所在模板被重新加载时
            3.备注：
                    1.指令定义时不加v-     调用时要加v-
                    2.指令如果是多个单词，要使用kebab-css命名方式  不要使用camelCase

     -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前n值是<span v-text="n"></span></h2>
        <!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span></h2> -->
        <h2>放大10倍后的n值是:<span v-big="n"></span></h2>
        <button @click="n++">点击n++</button>
        <hr>
        <input type="text" v-fbind="n">
        <hr>

    </div>
    <script>
        //设置全局指令
        // Vue.directive('fbind', {
        //     //指令与元素绑定的时候(一上来)
        //     bind(element, binding) {
        //         console.log('fbind-bind', this) //注意这里的this是window
        //         element.value = binding.value;
        //     },
        //     //指令所在元素被插入页面时
        //     inserted(element, binding) {
        //         element.focus();
        //     },
        //     //指令所在模板被重新加载时
        //     update(element, binding) {
        //         element.value = binding.value;
        //     }
        // })
        // Vue.directive('fbind', function(element, binding) {
        //     console.log('big')
        //     element.innerText = binding.value * 10
        // })


        new Vue({
            el: '#root',
            data: {
                n: 1,
                name: '测试'
            },
            directives: {
                //big函数什么时候被调用？ 1.指令与元素绑定的时候（一上来） 2.指令所在的模板被重新加载   
                // 'big-number'(element, binding) {
                //     console.log('big')
                //     element.innerText = binding.value * 10
                // },
                big(element, binding) {
                    console.log('big')
                    element.innerText = binding.value * 10
                },
                fbind: {
                    //指令与元素绑定的时候(一上来)
                    bind(element, binding) {
                        console.log('fbind-bind', this) //注意这里的this是window
                        element.value = binding.value;
                    },
                    //指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus();
                    },
                    //指令所在模板被重新加载时
                    update(element, binding) {
                        element.value = binding.value;
                    }
                }
            }
        })
    </script>

</body>

</html>